<template>
	<view class="content">
		<view class="time-lf">
			<view class="time-tit time-act">职业装</view>
			<view class="time-tit">工牌</view>
		</view>
		<view class="time-rt">
			<view class="store-tit">职业装</view>
			<view class="service">
				<view class="ser-img" style="background-image: url(../../static/server0.jpg);" ></view>
				<view class="ser-con">
					<view class="ser-tit">
						<text>男技师工装</text>
					</view>
					<view class="ser-des">
						<text>规格：XXL</text>
					</view>
					<view class="ser-pri">
						<view class="ser-pri-lf">
							<text>688</text>
							<text>￥888</text>
						</view>
						<view class="ser-pri-rt">
							<text class="iconfont icon-jianshao"></text>
							<text class="num">1</text>
							<text class="iconfont icon-node-add_fill"></text>
						</view>
					</view>

				</view>
			</view>
			<view class="service">
				<view class="ser-img" style="background-image: url(../../static/server0.jpg);" ></view>
				<view class="ser-con">
					<view class="ser-tit">
						<text>女技师工装</text>
					</view>
					<view class="ser-des">
						<text>规格：XXL</text>
					</view>
					<view class="ser-pri">
						<view class="ser-pri-lf">
							<text>688</text>
							<text>￥888</text>
						</view>
						<view class="ser-pri-rt">
							<text class="iconfont icon-jianshao"></text>
							<text class="num">1</text>
							<text class="iconfont icon-node-add_fill"></text>
						</view>
					</view>
			
				</view>
			</view>
			<view class="store-tit">工牌</view>
			<view class="service">
				<view class="ser-img" style="background-image: url(../../static/server2.jpg);" ></view>
				<view class="ser-con">
					<view class="ser-tit">
						<text>职业工牌</text>
					</view>
					<view class="ser-des">
						<text>规格：30cm</text>
					</view>
					<view class="ser-pri">
						<view class="ser-pri-lf">
							<text>688</text>
							<text>￥888</text>
						</view>
						<view class="ser-pri-rt">
							<text class="iconfont icon-jianshao"></text>
							<text class="num">1</text>
							<text class="iconfont icon-node-add_fill"></text>
						</view>
					</view>
			
				</view>
			</view>
		</view>

		<view class="tech-order">
			<view class="tech-price">
				<text>合计：</text>
				<text>￥2888</text>
			</view>
			<view class="tech-btn">
				<text @tap="goPlaceorder()">去结算</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
    data() {
        return {
			index: -1,
			picker: ['太原市', '北京市', '上海市']
        }
    },
    methods: {
		//去结算
		goPlaceorder(){
	        uni.navigateTo({
	            url: '/pages/placeorder/placeorder'
	        })
	    }
    }
}

</script>
<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.tech-order{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		border-top:1px solid #eee;
		background-color: #fff;
		.tech-price{
			text{
				font-size:28rpx;
				&:last-child{
					font-weight: bold;
					color: #ff0000;
				}
			}
		}
		.tech-btn{
			text{
				padding:10rpx 30rpx;
				color: #fff;
				font-size:28rpx;
				border-radius:30rpx;
				background-color:$uni-text-color-active;
			}
		}
	}
	.time-lf{
		width:25%;
		position: fixed;
		left:0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background-color: #fff;
		.time-tit{
			width:100%;
			height:80rpx;
			line-height:80rpx;
			text-align:center;
			font-size: 28rpx;
			&.time-act{
				background-color:$uni-bg-color-grey;
				color: $uni-text-color-active;
				position: relative;
				&:before{
					position: absolute;
					left: 0;
					top:33%;
					content: "";
					width:2px;
					height: 30rpx;
					background-color: $uni-text-color-active;
				}
			}
		}
	}
	.time-rt{
		width:70%;
		position: fixed;
		right:0;
		top: 0;
		bottom: 0;
		z-index: 1;
		background-color: #fff;
		.store-tit{
			padding:20rpx 20rpx 0;
			font-size: 28rpx;
			font-weight: bold;
		}
		.service{
			display: flex;
			padding:20rpx;
			border-bottom: 2rpx solid $uni-bg-color-grey;
			.ser-img{
				width:130rpx;
				height:130rpx;
				border-radius: 10rpx;
				background-position:50%;
				background-repeat:no-repeat;
				background-size: cover;
				margin-right: 20rpx;
			}
			.ser-con{
				flex: 1;
				.ser-tit{
					display: flex;
					justify-content:space-between;
					text{
						font-weight: bold;
						font-size:28rpx;
					}
				}
				.ser-des{
					font-size:24rpx;
					color: $uni-text-color-grey;
					margin:6rpx 0 ;
				}
				.ser-pri{
					display: flex;
					.ser-pri-lf{
						flex:1;
						text{
							&:first-child{
								font-size:28rpx;
								color:#ff0000;
								&::before{
									content:"￥";
									font-weight: normal;
									font-size:24rpx;
								}
							}
							&:last-child{
								display: none;
								font-size:20rpx;
								text-decoration: line-through;
								color: $uni-text-color-grey;
							}
						}
					}
					.ser-pri-rt{
						flex: 1;
						text-align: right;
						text{
							&.icon-jianshao{
								font-size:34rpx;
								color: $uni-text-color-active;
							}
							&.num{
								margin: 0 20rpx;
								font-size:28rpx;
							}
							&.icon-node-add_fill{
								font-size:36rpx;
								color:$uni-text-color-active;
							}
						}
					}
					// .ser-pri-rt{
					// 	flex: 1;
					// 	text-align: right;
					// 	navigator{
					// 		display: inline-block;
					// 		text-align: center;
					// 		padding:6rpx 15rpx;
					// 		border-radius:8rpx;
					// 		font-size: 24rpx;
					// 		color: #fff;
					// 		background-color: $uni-text-color-active;
					// 	}
					// }
				}
			}
		}
		.time-con{
			font-size: 28rpx;
			text-indent:40rpx;
			height: 80rpx;
			line-height:80rpx;
			&.time-con-act{
				position:relative;
				color: $uni-text-color-active;
				&::after{
					font-family: "iconfont" !important;
					font-size: 16px;
					font-style: normal;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					content: "\e627";
					position: absolute;
					right: 20rpx;
				}
			}
		}
	}
}
</style>